<!--
 * @Description: 文件描述
 * @Author: 程前
 * @Date: 2024-12-02 11:41:10
 * @LastEditors: 程前
 * @LastEditTime: 2025-02-13 15:07:51
-->
<template>
  <div class="map-common">
    <div class="map-common-icon">
      <ul>
        <li v-for="(item, index) in iconAyyry" :title="item.title" @click="handleIcon(item, index)">
          <i class="iconfont" :class="currentMenuIndex && currentMenuIndex === item.icon ? 'actived' : ''"
            v-html='item.content'></i>
        </li>
      </ul>
    </div>
    <div class="map-common-content" v-show="showCommon">
      <div class="common-top">
        <h5>{{ contentTitle }}</h5>
        <div class="close-icon-content" @click="handleCloseIcon" title="关闭">
          <i class="icon iconfont">&#xe631;</i>
        </div>
      </div>
      <div class="common-content">
        <!-- 专用标绘 -->
        <Plotting v-if="moduleType === 'biaohui'" />
        <!-- 环境设置 -->
        <environmentSetting v-if="moduleType === 'huanjing'" />
        <!-- 场景元素 -->
        <Scene v-if="moduleType === 'changjing'" />
        <!-- 测量工具 -->
        <measuring v-if="moduleType === 'celiang'"></measuring>
        <!-- 标记工具 -->
        <marking v-if="moduleType === 'biaoji'"></marking>
        <!-- 模型列表 -->
        <Models v-if="moduleType === 'tanke'" />
        <!-- 视点飞行 -->
        <Fly v-if="moduleType === 'feixing'" />
        <!-- 场景工具 -->
        <Tool v-if="moduleType === 'gongju'" />
        <!-- 粒子特效 -->
        <Priticle v-if="moduleType === 'lizi'" />
        <!-- 模型运动 -->
        <ModelMotion v-if="moduleType === 'yundong'" />
        <!-- 功能测试 -->
        <Test v-if="moduleType === 'ceshi'" />

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import Plotting from './plotting/Index.vue'
import Scene from './Scene/index.vue'
import marking from './marking/index.vue'
import measuring from './measuring/index.vue'
import environmentSetting from './environmentSetting/index.vue'
import Models from './models/Index.vue'
import Fly from "./fly/Index.vue"
import Tool from "./tool/analysis.vue"
import Priticle from "./priticleEffects/Index.vue"
import ModelMotion from "./modeMotion/Index.vue"
import Test from "./test/Index.vue"
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { fixedFreeCameraControl } from "@/utils"

const cesiumGlobalStore = useCesiumGlobalStore()
let contentTitle = ref<string>('')
let showCommon = ref<boolean>(false)
const iconAyyry = [
  {
    icon: 'changjing',
    title: '场景元素',
    content: '&#xe628;'
  },
  {
    icon: 'celiang',
    title: '测量工具',
    content: '&#xe603;'
  },
  {
    icon: 'biaoji',
    title: '标记工具',
    content: '&#xe638;'
  },
  {
    icon: 'biaohui',
    title: '专用标绘',
    content: '&#xee32;'
  },
  {
    icon: 'tanke',
    title: '模型',
    content: '&#xe685;'
  },
  {
    icon: 'huanjing',
    title: '环境设置',
    content: '&#xe686;'
  },
  {
    icon: 'feixing',
    title: '视点飞行',
    content: '&#xe622;'
  },
  {
    icon: 'gongju',
    title: '场景工具',
    content: '&#xe649;'
  },
  {
    icon: 'lizi',
    title: '粒子特效',
    content: '&#xe600;'
  },
  {
    icon: 'yundong',
    title: '模型运动',
    content: '&#xe602;'
  },
  {
    icon: 'ceshi',
    title: '测试功能',
    content: '&#xe601;'
  }
]
onMounted(async () => {

})

/**
 * 获取当前模块
 */
const moduleType = computed(() => {
  return cesiumGlobalStore.moduleType
})



//   点击打开工具栏
const currentMenuIndex = ref<string | null>(null)
const handleIcon = (val: {
  icon: string; title: string
}, index: number) => {
  fixedFreeCameraControl()
  showCommon.value = true
  currentMenuIndex.value = val.icon
  contentTitle.value = val.title
  cesiumGlobalStore.moduleType = val.icon
  cesiumGlobalStore.showConfigPanel = false
  const loader = cesiumGlobalStore.loader
  loader && loader.destroy()
  cesiumGlobalStore.loader = null
}

//关闭工具栏
const handleCloseIcon = () => {
  showCommon.value = false
  currentMenuIndex.value = null
}

</script>

<style scoped lang="less">
.map-common {
  display: flex;
  position: absolute;
  top: 100px;
  margin-left: 20px;

  .map-common-icon {
    width: 50px;
    background-color: white;

    ul {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
      cursor: pointer;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border-bottom: 1px solid #eee;

      i:hover {
        color: black;
      }

      // :deep(.iconfont) {
      //   font-size: 30px;
      // }

      :deep(.actived) {
        color: #3c9ceb
      }

      .iconfont:hover {
        color: #000
      }
    }
  }

  .map-common-content {
    width: 270px;
    min-width: 270px;
    padding: 0 40px 18px 40px;
    background-color: white;

    .common-top {
      display: flex;
      height: 50px;
      line-height: 50px;
      justify-content: space-between;

      h5 {
        margin: 0;
      }

      .close-icon-content {
        color: black;
        cursor: pointer;

        i {
          font-size: 14px;
        }
      }
    }

    .common-content {
      max-height: 91%;
      min-width: 260px;
      overflow: hidden;
    }

  }

}
</style>